<template>
    <el-popover placement="bottom-start" :width="width" trigger="click" popper-class="materialPopover">
        <el-select slot="reference" ref="select" :value="value" placeholder="请选择" size="small" @visible-change="visibleChange" clearable
                   style="width: 100%;" @clear="clear">
            <el-option :value="optionData.id" :label="optionData.name"></el-option>
        </el-select>
        <div class="materialSelect">
            <knowledgeTree @getClassId="getClassId" type="material" name="全部分类" :canEdit="false"></knowledgeTree>
            <el-radio-group v-model="fileRadio" @change="radioChange">
                <el-tabs v-model="fileType">
                    <el-tab-pane label="图文" name="graphics"></el-tab-pane>
                    <el-tab-pane label="图片" name="picture"></el-tab-pane>
                    <el-tab-pane label="语音" name="voice"></el-tab-pane>
                    <el-tab-pane label="视频" name="video"></el-tab-pane>
                    <el-tab-pane label="文件" name="file"></el-tab-pane>
                </el-tabs>
                <div class="fileList">
                    <!-- <div class="picture" v-if="fileType == 'picture'">
                        <div class="pictureItem" v-for="item in fileList" :key="item.id">
                            <el-radio :label="item.id"><span></span></el-radio>
                            <img :src="item.url" alt="" style="width: 100px" />
                        </div>
                    </div> -->
                    <div class="file">
                        <div class="fileItem" v-for="item in fileList" :key="item.id">
                            <el-radio :label="item.id"><span></span></el-radio>
                            <p class="fileName">{{item.fileName}}</p>
                        </div>
                    </div>
                </div>
            </el-radio-group>
        </div>
    </el-popover>
</template>

<script>
import knowledgeTree from "@/components/knowledgeTree";
import { getMessageList, getFileList } from "@/api/material.js"
export default {
    name: 'materialSelect',
    props: {
        value: {
            type: [String, Number],
            default: ''
        },
        materialType: {
            type: String,
            default: 'graphics'
        },
        width: {
            type: String,
            default: '600'
        }
    },
    data() {
        return {
            optionData: {
                id: '',
                name: ''
            },
            fileType: "graphics",
            fileList: [],
            classId: "",
            fileRadio: "",
            isInit: false,
        }
    },
    watch: {
        value(val) {
            if (val != "") {
                if (this.materialType == this.fileType) {
                    this.setData(val);
                } else {
                    this.isInit = false;
                    this.fileType = this.materialType;
                    var timer = setInterval(() => {
                        if (this.isInit) {
                            this.setData(val);
                            clearInterval(timer);
                        }
                    }, 200);
                }
            } else {
                this.optionData.id = "";
                this.optionData.name = "";
                this.fileRadio = "";
            }
        },
        materialType(val) {
            this.fileType = val;
        },
        fileType() {
            this.isInit = false;
            this.fileList = [];
            this.getFileList(true);
        }
    },
    created() {
        this.fileType = this.materialType;
        this.getFileList();
    },
    methods: {
        getFileList(flag = false) {
            var param = {
                pageNo: 1,
                pageSize: 999,
                classId: this.classId
            }
            if (this.fileType != "graphics") {
                param.type = this.fileType;
                getFileList(param).then(resp => {
                    if (resp.status == 0) {
                        this.fileList = resp.data.fileList;
                        if (flag) {
                            this.isInit = true;
                        } else {
                            if (this.value) {
                                this.setData(this.value)
                            }
                        }
                    }
                });
            } else {
                getMessageList(param).then(resp => {
                    if (resp.status == 0) {
                        var messageList = resp.data.messageList || [];
                        var fileList = [];
                        messageList.forEach(item => {
                            var obj = {}, arr = [];
                            item.contentList.forEach(item => { arr.push(item.title) });
                            obj.id = item.id;
                            obj.fileName = arr.join(";");
                            obj.contentList = item.contentList;
                            fileList.push(obj);
                        });
                        this.fileList = fileList;
                        if (flag) {
                            this.isInit = true;
                        } else {
                            if (this.value) {
                                this.setData(this.value)
                            }
                        }
                    }
                });
            }
        },
        getClassId(id) {
            this.classId = id;
            this.getFileList();
        },
        visibleChange() {
            this.$refs.select.visible = false;
        },
        clear() {
            this.$emit('input', '');
            this.fileRadio = "";
        },
        radioChange(id) {
            this.$emit('input', id);
            this.$emit('update:materialType', this.fileType);
            this.$emit('change', id);
        },
        setData(id) {
            var index = this.fileList.findIndex(item => item.id == id);
            this.optionData.id = id;
            if (index >= 0) {
                this.optionData.name = this.fileList[index].fileName;
                this.$emit('update:content', this.fileList[index]);
            }
            this.fileRadio = id;
        }
    },
    components: {
        knowledgeTree
    }
}
</script>

<style lang="scss">
.materialPopover {
    padding: 0 10px;
    box-shadow: 0px 0px 15px 0px #e1e9f1;
    border: none;
}
.materialSelect {
    display: flex;
    height: 300px;
    padding: 10px 0;
    .knowledgeTree {
        width: 220px;
        margin-right: 20px;
        flex-shrink: 0;
        background: #f5f7fa;
        .el-tree {
            background: #f5f7fa;
        }
    }
    > .el-radio-group {
        flex: 1;
        .el-tabs__active-bar {
            width: 67px !important;
        }
        .fileList {
            width: 390px;
            height: calc(100% - 60px);
            overflow-x: hidden;
            overflow-y: scroll;
            .picture {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                .pictureItem {
                    position: relative;
                    width: 100px;
                    margin-bottom: 10px;
                    .el-radio {
                        position: absolute;
                        top: 5px;
                        right: -5px;
                        margin-right: 0;
                    }
                }
            }
            .fileItem {
                display: flex;
                margin-bottom: 12px;
                .el-radio {
                    margin-right: 8px;
                }
                .fileName {
                    font-size: 14px;
                    color: #676e75;
                }
            }
        }
    }
}
</style>